/***********************************************************
 * Copyright (c) Microsoft Corporation. All rights reserved.
 * Licensed under the MIT License
 **********************************************************/
 @import 'palette';

 $themes: (
  light: (
    headerTitleColor: #cccccc,
    headerBackgroundColor: $dark-gray,
    headerActiveBackgroundColor: $medium-gray,
    headerButtonColor: #cccccc,
    deviceListBorderWidth: 0,
    backgroundColor: #ffffff,
    buttonBackgroundColor: #161616,
    buttonColor: $blue,
    borderColor: $gray,
    textColor: #161616,
    textFieldBackgroundColorInactive: rgba(128, 128, 128, 0.1),
    contrastBorder: $light-medium-gray,
    iconInText: #636363,
    summaryBackground: $light-gray,
    searchButtonColor: #ffffff,
    searchButtonBackground: $blue,
    searchButtonDisabled: $gray,
    searchBorderColor:  #161616,
    searchBorderHoverColor: $blue,
    searchBorderErrorColor: $errorBorder,
    errorText: $errorText,
    errorBorder: $errorBorder,
    navBarBorderColor: $navBarBorderColor,
    blockingColor: $blockingColor,
    notificationBackground: $blue,
    notificationSuccessColor: $successText,
    notificationErrorColor: $errorText,
    notificationWarningColor: $warningText,
    notificationInfoColor: $infoText,
    notificationTextColor: #161616,
    notificationProgressBackground: $light-medium-gray !important,
    notificationBackgroundColor: #ffffff,
    maskedCopyableColor: #161616,
    maskedCopyableBackground: #ffffff,
    maskedCopyableReadonlyBackground: $textfield-disabled-background,
    linkColor: $link-blue,
    cellBackGround: $cell-gray,
    selectedBorder: $selected-border,
    boxShadowColor: $blockingColor,
    formControlDisabledBackground: rgb(244,244,244),
    formControlDisabledColor: rgb(166,166,166),
    opaqueBlocking: $opaque-blocking,
    numbering: #A6A6A6,
    shadow: 0px 4px 4px rgba(0, 0, 0, 0.2),
    calloutShadow: 0px 6.4px 14.4px 0px rgba(0, 0, 0, 0.133),
    pagerTextColor: black,
    pagerColor: $gray,
    pagerColorSelected: $light-gray,
    pagerButtonColor: $blue,
    successText: $successText,
    infoText: #52ABFF,
    inputComponentBackgroundColor: #ffffff,
    pivotOnHoverBackground: $textfield-disabled-background,
    menuLinkBackground_Active: rgb(234, 234, 234),
    menuLinkBackground_Hover: rgb(250, 250, 250),
    menuLinkBorder_Active: rgb(0, 116, 204),
    menuLinkColor_Hover: rgb(0, 116, 204),
    menuLinkColor: rgb(51,51,51)
  ),
  dark: (
    headerTitleColor: #cccccc,
    headerBackgroundColor: $dark-gray,
    headerActiveBackgroundColor: $medium-gray,
    headerButtonColor: #cccccc,
    deviceListBorderWidth: 0,
    backgroundColor: $dark-gray,
    buttonBackgroundColor: #cccccc,
    buttonColor: rgb(75, 166, 216),
    borderColor: $light-gray,
    textColor: #cccccc,
    textFieldBackgroundColorInactive: rgba(128, 128, 128, 0.1),
    contrastBorder:$gray,
    iconInText: #acacac,
    summaryBackground: $dark-medium-gray,
    searchButtonColor: #cccccc,
    searchButtonBackground: $blue,
    searchButtonDisabledBackground: $gray,
    searchBorderColor:  $light-gray,
    searchBorderHoverColor: $blue,
    searchBorderErrorColor: $errorBorder,
    errorText: #F9808A,
    errorBorder: $errorBorder,
    navBarBorderColor: $navBarBorderColor,
    blockingColor: $blockingColor,
    notificationBackground: $blue,
    notificationSuccessColor: $successText,
    notificationErrorColor: $errorText,
    notificationWarningColor: $warningText,
    notificationInfoColor: $infoText,
    notificationTextColor: #cccccc,
    notificationBackgroundColor: $dark-gray,
    notificationProgressBackground: $light-medium-gray !important,
    maskedCopyableColor: #cccccc,
    maskedCopyableReadonlyBackground: #363636,
    maskedCopyableBackground: $dark-gray,
    linkColor: rgb(75, 166, 216),
    cellBackground: $dark-gray,
    selectedBorder: $selected-border,
    boxShadowColor: $blockingColor,
    formControlDisabledColor: $light-medium-gray,
    formControlDisabledBackGround: #1a1a1f,
    opaqueBlocking: $dark-gray,
    numbering: #A6A6A6,
    shadow: -1px 3px 6px 2px rgba(128, 128, 128, 0.6),
    calloutShadow: 0px 3px 10px 5px rgba(128, 128, 128, 0.5),
    pagerTextColor: black,
    pagerColor: $blue,
    pagerColorSelected: #cccccc,
    pagerButtonColor: black,
    successText: #1AC11A,
    infoText: rgb(75, 166, 216),
    inputComponentBackgroundColor: $dark-gray,
    pivotOnHoverBackground: #363636,
    menuLinkBackground_Active: rgb(37, 37, 37),
    menuLinkBackground_Hover: rgb(96,94,92),
    menuLinkBorder_Active: rgb(75, 166, 216),
    menuLinkColor_Hover: rgb(75, 166, 216),
    menuLinkColor: rgb(248,248,248)
  ),
  highContrastWhite: (
    headerTitleColor: $contrast-white-text,
    headerBackgroundColor: $contrast-white-background,
    headerActiveBackgroundColor: $contrast-white-background,
    headerButtonColor: $contrast-white-button-text,
    deviceListBorderWidth: 1,
    backgroundColor: $contrast-white-background,
    buttonBackgroundColor: $contrast-white-button-background,
    buttonColor: $contrast-white-button-text,
    borderColor: $contrast-white-border,
    textColor: $contrast-white-text,
    textFieldBackgroundColorInactive: $contrast-white-background,
    contrastBorder: $contrast-white-border,
    iconInText: $contrast-white-text,
    summaryBackground: $contrast-white-background,
    searchButtonColor: $contrast-white-text,
    searchButtonBackground: $contrast-white-background,
    searchButtonDisabled: $contrast-white-disabled-text,
    searchBorderColor:  $contrast-white-border,
    searchBorderHoverColor: $contrast-white-border,
    searchBorderErrorColor: $contrast-white-border,
    errorText: $contrast-white-text,
    errorBorder: $contrast-white-border,
    navBarBorderColor: $contrast-white-border,
    blockingColor: $contrast-white-background,
    notificationBackground: $contrast-white-background,
    notificationSuccessColor: $contrast-white-text,
    notificationErrorColor: $contrast-white-text,
    notificationWarningColor: $contrast-white-disabled-text,
    notificationInfoColor: $contrast-white-disabled-text,
    notificationTextColor: $contrast-white-text,
    notificationProgressBackground: $contrast-white-disabled-text !important,
    notificationBackgroundColor: $contrast-white-background,
    maskedCopyableColor: $contrast-white-text,
    maskedCopyableBackground: $contrast-white-background,
    maskedCopyableReadonlyBackground: $contrast-white-background,
    linkColor: $contrast-white-hyperlink,
    cellBackGround: $contrast-white-background,
    selectedBorder: $contrast-white-border,
    boxShadowColor: $contrast-white-background,
    formControlDisabledBackground: $contrast-white-background,
    formControlDisabledColor: $contrast-white-disabled-text,
    opaqueBlocking: $contrast-white-background,
    numbering: $contrast-white-text,
    shadow: none,
    calloutShadow: none,
    pagerTextColor: $contrast-white-text,
    pagerColor: $contrast-white-text,
    pagerColorSelected: $contrast-white-selected-background,
    pagerButtonColor: $contrast-white-text,
    successText: $contrast-white-text,
    infoText: $contrast-white-text,
    inputComponentBackgroundColor: $contrast-white-background,
    pivotOnHoverBackground: $contrast-white-background,
  ),
  highContrastBlack: (
    headerTitleColor: $contrast-black-text,
    headerBackgroundColor: $contrast-black-background,
    headerActiveBackgroundColor: $contrast-black-background,
    headerButtonColor: $contrast-black-button-text,
    deviceListBorderWidth: 1,
    backgroundColor: $contrast-black-background,
    buttonBackgroundColor: $contrast-black-button-background,
    buttonColor: $contrast-black-button-text,
    borderColor: $contrast-black-border,
    textColor: $contrast-black-text,
    textFieldBackgroundColorInactive: $contrast-black-background,
    contrastBorder: $contrast-black-border,
    iconInText: $contrast-black-text,
    summaryBackground: $contrast-black-background,
    searchButtonColor: $contrast-black-text,
    searchButtonBackground: $contrast-black-background,
    searchButtonDisabled: $contrast-black-disabled-text,
    searchBorderColor:  $contrast-black-border,
    searchBorderHoverColor: $contrast-black-border,
    searchBorderErrorColor: $contrast-black-border,
    errorText: $contrast-black-text,
    errorBorder: $contrast-black-border,
    navBarBorderColor: $contrast-black-border,
    blockingColor: $contrast-black-background,
    notificationBackground: $contrast-black-background,
    notificationSuccessColor: $contrast-black-text,
    notificationErrorColor: $contrast-black-text,
    notificationWarningColor: $contrast-black-disabled-text,
    notificationInfoColor: $contrast-black-disabled-text,
    notificationTextColor: $contrast-black-text,
    notificationProgressBackground: $contrast-black-disabled-text !important,
    notificationBackgroundColor: $contrast-black-background,
    maskedCopyableColor: $contrast-black-text,
    maskedCopyableBackground: $contrast-black-background,
    maskedCopyableReadonlyBackground: $contrast-black-background,
    linkColor: $contrast-black-hyperlink,
    cellBackGround: $contrast-black-background,
    selectedBorder: $contrast-black-border,
    boxShadowColor: $contrast-black-background,
    formControlDisabledBackground: $contrast-black-background,
    formControlDisabledColor: $contrast-black-disabled-text,
    opaqueBlocking: $contrast-black-background,
    numbering: $contrast-black-text,
    shadow: none,
    calloutShadow: none,
    pagerTextColor: $contrast-black-text,
    pagerColor: $contrast-black-text,
    pagerColorSelected: $contrast-black-selected-background,
    pagerButtonColor: $contrast-black-text,
    successText: $contrast-black-text,
    infoText: $contrast-black-text,
    inputComponentBackgroundColor: $contrast-black-background,
    pivotOnHoverBackground: $contrast-black-background
  ),
);

@mixin themify($themes: $themes) {
    @each $theme, $map in $themes {
      .theme-#{$theme} & {
        $theme-map: () !global;
        @each $key, $submap in $map {
          $value: map-get(map-get($themes, $theme), '#{$key}');
          $theme-map: map-merge($theme-map, ($key: $value)) !global;
        }

        @content;
        $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}